import { RbacMenuBtnType } from '@/data/auth/menu';
import { useMenus } from '@/hooks/auth/useMenus';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { ProFormGroup } from '@ant-design/pro-form/lib';
import React, { useEffect, useRef } from 'react';

export type UpdateFormProps = {
  onCancel: () => void;
  onSubmit: (values: any) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacMenuBtnType>;
};

const Index: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<any>(null);
  const { allMenuValueEnum } = useMenus();

  useEffect(() => {
    if (formRef.current && props.updateModalVisible) {
      formRef.current.resetFields();
    }
  }, [props.values, props.updateModalVisible]);

  return (
    <ModalForm
      title="更新"
      width="800px"
      open={props.updateModalVisible}
      onFinish={(values) => {
        return props.onSubmit(values);
      }}
      formRef={formRef}
      onOpenChange={(value) => {
        if (!value) {
          props.onCancel();
        }
      }}
      key={`menu-update-button-${props.values?.id || Math.random()}`}
    >
      <ProFormGroup colProps={{ span: 12 }}>
        <ProFormSelect
          width="md"
          name="menuId"
          label={'菜单'}
          valueEnum={allMenuValueEnum}
          disabled={true}
          initialValue={props.values?.menuId}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '按钮名称为必填项',
            },
            {
              pattern: /^[\u4e00-\u9fa50-9]+$/,
              message: '只能输入中文字符',
            },
          ]}
          width="md"
          name="name"
          label={'按钮名称'}
          placeholder={'请输入按钮名称'}
          initialValue={props.values?.name}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '按钮标识为必填项',
            },
            {
              pattern: /^[a-zA-Z0-9:]+$/,
              message: '只能输入英文字符',
            },
          ]}
          width="md"
          name="btnPerm"
          label={'按钮标识'}
          initialValue={props.values?.btnPerm}
          placeholder={'请输入按钮标识'}
        />
      </ProFormGroup>
    </ModalForm>
  );
};

export default Index;
